<!--
@文件名： App.vue
@来源：YongPing.Wang|2023/11/12 11:12
@描述：根
-->
<script setup lang="ts">
  import { ref, watchEffect } from 'vue'
  import { layoutInfo } from '@/store/layoutInfo.ts'
  import { useI18n } from 'vue-i18n'
  import dayjs from 'dayjs'
  import { renderSkin } from '@/theme/skin'
  import LGLog from '@/config/common/log.ts'

  // i18
  const { messages, locale }: any = useI18n()
  // 框架配置
  const storeLayoutInfo = layoutInfo()

  // 按钮
  const configBtn = ref({
    autoInsertSpace: true,
  })
  // 字号
  const fontAndSize = ref('default')
  // 层级
  const zIndexDefault = ref(1000)
  // 消息
  const configMessage = ref({
    max: 2,
  })

  // 语言
  const localeName = ref(messages[storeLayoutInfo.localeConfig])
  // 修改默认语言
  const changeLanguage = (): void => {
    locale.value = storeLayoutInfo.localeConfig
    localeName.value = messages.value[storeLayoutInfo.localeConfig]
    dayjs.locale(storeLayoutInfo.localeConfig)
    document.getElementsByTagName('html')[0].setAttribute('lang', storeLayoutInfo.localeConfig)
    LGLog.capsule('设置语言', storeLayoutInfo.localeConfig)
  }
  // 监听修改语言
  watchEffect(changeLanguage)

  // 皮肤
  const themeName = ref<string>(storeLayoutInfo.platformTheme)
  // 修改默认语言
  const changeThemeName = (): void => {
    themeName.value = storeLayoutInfo.platformTheme
    void renderSkin(storeLayoutInfo.platformTheme)
  }
  // 监听修改主题
  watchEffect(changeThemeName)
</script>

<template>
  <el-config-provider :locale="localeName" :button="configBtn" :size="fontAndSize" :zIndex="zIndexDefault" :message="configMessage">
    <router-view v-slot="{ Component }">
      <transition enter-active-class="animate__animated animate__fadeIn">
        <component :is="Component" />
      </transition>
    </router-view>
  </el-config-provider>
</template>

<style scoped lang="scss"></style>
